<template>
  <div>
    <el-row :gutter="20">

      <el-col :span="6">
        <el-card class="box-card">
          <span style="font-size: 22px">
            <i class="el-icon-user-solid"></i>
            今日新增会员
          </span>
          <br>
          <br>
          <span style="font-size: 28px; font-weight: 600; color: red">18</span>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="box-card">
          <span style="font-size: 22px">
            <i class="el-icon-money"></i>
            今日付款下单
          </span>
          <br>
          <br>
          <span style="font-size: 28px; font-weight: 600; color: red">59</span>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="box-card">
          <span style="font-size: 22px">
            <i class="el-icon-money"></i>
            今日付款金额
          </span>
          <br>
          <br>
          <span style="font-size: 28px; font-weight: 600; color: red">￥ 1382.98</span>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="box-card">
          <span style="font-size: 22px">
            <i class="el-icon-money"></i>
            今日退款金额
          </span>
          <br>
          <br>
          <span style="font-size: 28px; font-weight: 600; color: red">￥ 0.00</span>
        </el-card>
      </el-col>
    </el-row>
    <br>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card-context">
          <div slot="header" class="clearfix">
            <span>7日下单统计</span>
          </div>
          <div id="myChart" style="height: 500px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card-context">
          <div slot="header" class="clearfix">
            <span>7日付款统计</span>
          </div>
          <div id="myChart2" style="height: 500px"></div>
        </el-card>
      </el-col>
    </el-row>
    <br>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card-bottom">
          <div slot="header" class="clearfix">
            <span>ERP信息统计</span>
          </div>
          <div style="text-align: left">
            <span style="font-size: 12px">
              <i class="el-icon-user-solid"></i>
              商品总数：391
            </span>
            <br>
            <span style="font-size: 12px">
              <i class="el-icon-user-solid"></i>
              会员总数：108
            </span>
            <br>
            <span style="font-size: 12px">
              <i class="el-icon-user-solid"></i>
              订单总数：762
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card-bottom">
          <div slot="header" class="clearfix">
            <span>商品预警</span>
          </div>
          <div>

          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card-bottom">
          <div slot="header" class="clearfix">
            <span>快捷入口</span>
          </div>
          <div>

          </div>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: "preview",
    mounted() {
      this.drawLine();
      this.bar();
    },
    methods: {
      // 7日下单
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('myChart'));
        // 绘制图表
        myChart.setOption({
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [13, 22, 31, 12, 4, 6, 10],
              type: 'line'
            }
          ],
          grid: {
            width:500,
            height:160,
            top: 10
          }
        });
      },

      // 7日付款
      bar() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('myChart2'));
        // 绘制图表
        myChart.setOption({
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar'
            }
          ],
          grid: {
            width:500,
            height:160,
            top: 10
          }
        });
      }
    }
  }
</script>

<style scoped>
  .box-card {
    width: 300px;
    height: 100px;
  }

  .box-card-context {
    width: 635px;
    height: 300px;
  }

  .clearfix {
    text-align: left
  }

  .box-card-bottom {

  }
</style>
